<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= title %></title>
    <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="/lib/AdminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/lib/AdminLTE/css/skins/skin-blue.css">
</head>

<body class="hold-transition skin-blue fixed">
<div class="wrapper">
    <% include ./common/header.ejs %>
    <div class="content-wrapper">
        <section class="content-header">
            <h1>校园卡管理
                <small>管理员</small>
            </h1>
            <ol class="breadcrumb">
                <li>
                    <a href="#">
                        <i class="fa fa-dashboard"></i>
                        主页
                    </a>
                </li>
            </ol>
        </section>
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <a href="/admin/card/add" class="btn btn-primary btn-sm">新增</a>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">校园卡列表</h3>
                            <div class="box-tools">
                                <div class="input-group input-group-sm" style="width: 150px;">
                                    <input type="text" name="table_search" class="form-control pull-right"
                                           placeholder="搜索">
                                    <div class="input-group-btn">
                                        <button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="box-body table-responsive no-padding">
                            <table class="table table-hover">
                                <tbody>
                                <tr>
                                    <th style="width: 70px;">ID</th>
                                    <th>使用者</th>
                                    <th>状态</th>
                                    <th>余额</th>
                                    <th>操作</th>
                                </tr>
                                <% list.forEach(function(card){ %>
                                    <tr>
                                        <td><%= card.id %></td>
                                        <td><%= card.user %></td>
                                        <td>
                                            <% if(card.status === 0){ %>
                                                <span class="label label-success">使用中</span>
                                            <% }else{ %>
                                                <span class="label label-danger">已禁用</span>
                                            <% } %>
                                        </td>
                                        <td><%= card.balance %></td>
                                        <td style="width: 150px;">
                                            <a href="#" class="btn btn-primary btn-xs">禁用</a>
                                            <a href="#" class="btn btn-info btn-xs">挂失</a>
                                            <a href="#" class="btn btn-success btn-xs">查询</a>
                                        </td>
                                    </tr>
                                <% }); %>
                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <% include ./common/footer.ejs %>
</div>
<script src="/lib/jquery/jquery.min.js"></script>
<script src="/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="/lib/AdminLTE/js/adminlte.min.js"></script>
</body>

</html>